<template>
	<view>
		<view>
			<navbar name="我的收藏"></navbar>
			<view>
				<u-tabs height="100" item-width="240" bg-color="#f5f5f5" font-size="30rpx" bar-width="80"
					active-color="#2EA7E0" :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<view v-if="current==0">
				<view class="body-bgf">
					<block v-for="(item,idx) in records" :key="idx">
						<view class="weui-flex articleBody" @tap="collectTap(item,idx,'','wz')">
							<view class="articleView">
								<view class="articleContent text-line">
									{{item.topicTitle}}
								</view>
								<view class="lockbody">
									<view class="lockView"></view>{{item.readNum}}
								</view>
							</view>
							<view class="articleImage">
								<u-lazy-load border-radius="10" height="160" img-mode="aspectFill"
									:image="item.coverUrl">
								</u-lazy-load>
							</view>
						</view>
						<u-line class="u-line"></u-line>
					</block>
				</view>
				<view v-if="records.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
					<view class="noDataicon">
					</view>
					暂无数据
				</view>
			</view>
			<view v-if="current==1">
				<view :class="records.length >0?'body-bgf':''" style="padding-top:1upx;">
					<view class="typearea" v-for="(item,index) in records" :key="index"
						@tap="collectTap(item,idx,'','TV')">
						<view class="every-list">
							<view class="left-img">
								<u-lazy-load border-radius="10" height="187" img-mode="aspectFill"
									:image="item.coverUrl">
								</u-lazy-load>
								<view class="video-img-box">
									<image src="https://bsyjk-pic.bsyjk.cn/l/F8C96B4B4CE6440AA0ADD678C455CCA5.png"
										style="width: 41upx;height: 41upx;" mode=""></image>
								</view>
							</view>
							<view>
								<view class="right-text text-line">
									{{item.topicTitle}}
								</view>
								<view class="eye-look">
									<view class="eyeImg-box">
										<image src="https://bsyjk-pic.bsyjk.cn/l/3016654B38674A31A70E382B2AEDB4BF.png"
											style="width: 43upx;height: 27upx;" mode=""></image>
									</view>
									<view class="look-num">
										{{item.readNum}}
									</view>
								</view>
							</view>
						</view>
						<view v-show="list.length-1!=index" class="lines"></view>
					</view>
				</view>
				<view v-if="records.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
					<view class="noDataicon">
					</view>
					暂无数据
				</view>
			</view>
			<view v-if="current==2">
				<!-- 分享html  ++css  逻辑  接口在此页面 -->
				<!-- <circle :leftList="leftList" :rightList="rightList" @collectTap="collectTap2"></circle> -->
			<view>
				<view class="waterfall-box h-flex-x h-flex-2">
					<view>
						<helang-waterfall
							v-for="(item,index) in leftList"
							:key="index"
							:params="item"
							tag="left"
							:index="index"
							@height="onHeight"
							@click="onClick"
							@collectTap="collectTap2"
						></helang-waterfall>
					</view>
					<view>
						<helang-waterfall
							v-for="(item,index) in rightList"
							:key="index"
							:params="item"
							@height="onHeight"
							@click="onClick"
							tag="right"
							:index="index"
							@collectTap="collectTap2"
						></helang-waterfall>
					</view>
				</view>
				<view class="load-txt">{{ajax.loadTxt}}</view>
			</view>
			</view>
		</view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>

</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"


	import circle from "@/components/circle/circle"
	import helangWaterfall from "@/components/helang-waterfall/helang-waterfall"
	export default {
		components: {
			uTabs,
			uLazyLoad,
			uLine,
			uLoading,
			circle,
			"helang-waterfall": helangWaterfall
		},
		data() {
			return {
				// 按照高度加载瀑布流
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows:4,
					// 页码
					page:1,
				},
				// end


				loadingone: false, //懒加载动画
				leftList: [], //左侧数组
				rightList: [], //右侧数组
				records: [], //后端返回数据
				pageCurrent: 1,
				pageSize: 4,
				flowList: [],
				list2: [], //文章总
				vidioList: [],
				articleList: [],
				list: [{
					name: '文章',
				}, {
					name: '讲堂',
				}, {
					name: '帖子',
				}],
				current: 0,
				sectionCurrent: 0,
			}
		},
		onLoad() {
			this.getUserCollectList(this.pageCurrent, this.pageSize, this.current + 1, 1, false)
			uni.$on('toUpdateFabulous', this.toUpdateFabulous) //联动点赞
		},
		onReachBottom: function() { //分页加载
			let current = this.current == 2 ? 4 : this.current + 1;
			this.getUserCollectList(this.pageCurrent += 1, this.pageSize, current, 1, true);
		},
		onUnload() { //页面卸载
			uni.$off('toUpdateFabulous', this.toUpdateFabulous)
		},
		methods: {
			// 按照高度加载瀑布流
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index, tag,item){
				console.log(index, tag,item);
				// 对应的数据
				if(tag == 'left'){
					console.log(this.leftList[index]);
				}else{
					console.log(this.rightList[index]);
				}
			},
			addList(res) {
				// 获取到的数据，请注意数据结构
				console.log(res);

				if(!res || res.length < 1){
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index)=>{
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if(differ>= 600 && index < 3){
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if(differ <= -600 && index < 3){
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if(differ >= 350 && index < 2){
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if(differ <= -350 && index < 2){
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i+differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if(getDirection(index) == 'left'){
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					}else{
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if(this.ajax.page == 1){
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				}else{
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}

				this.ajax.load = true;
				this.ajax.loadTxt = '上拉加载更多';
				this.ajax.page++;
			},
			// end
			toUpdateFabulous(data) { //点赞更新
				console.log(data, '1588888888888')
				let type = data.type, //当前type
					index = parseInt(data.index); //index
				if (type == 'left') {
					if (data.deleteForum) { //删除
						this.leftList.splice(index, 1);
					} else { //点赞
						this.leftList[index].upvoteNum = data.upvoteNum
					}
				} else if (type == 'right') {
					if (data.deleteForum) { //删除
						this.rightList.splice(index, 1);
					} else {
						this.rightList[index].upvoteNum = data.upvoteNum
					}
				}
			},
			collectTap2(item) {
				console.log(item)
				this.collectTap(item.item, item.index, item.type, 'FT')
			},
			collectTap(item, index, pageType, type) {
				console.log(item, index, pageType, type, '151111111111111111111')
				if (type == 'TV') {
					if (item.delFlag == 1) {
						uni.showToast({
							title: '此视频已删除',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.navigateTo({
							url: '/pages/subpackage/find/video-detail/video-detail?id=' + item.albumId
						})
					}
				} else if (type == 'wz') {
					if (item.delFlag == 1) {
						uni.showToast({
							title: '此文章已删除',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.navigateTo({
							url: '/pages/subpackage/find/articleDetails/details?id=' + item.topicId
						})
					}
				} else if (type == 'FT') {
					if (item.delFlag == 1) {
						uni.showToast({
							title: '此分享已删除',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.navigateTo({
							url: '/pages/subpackage/find/share/share?forumId=' + item.topicId + '&index=' + index +
								'&type=' + pageType
						})
					}

				}
			},
			getUserCollectList(pageCurrent, pageSize, topicType, userSource, onReach) {
				if (onReach) {
					uni.showLoading({
						title: '加载中',
						duration: 2000
					});
				} else {
					this.loadingone = true
				}
				let _this = this;
				this.$cms.get(global.apiUrls.getUserCollectList + '?keyword=&pageCurrent=' + pageCurrent + '&pageSize=' +
						pageSize +
						'&topicType=' + topicType + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId + '&userSource=' +
						userSource, {})
					.then(res => {
						if (res.data.code == 1000) {
							if (onReach) { //分页
								let records = res.data.result.records;
								if (_this.current == 2) { //分享
									// _this.addRandomData(records);
									_this.addList(records)
								} else {
									_this.records = _this.records.concat(records);
								}
								uni.hideToast(); //隐藏
							} else { //切换
								let records = res.data.result.records;
								if (_this.current == 2) { //分享
									if (_this.leftList.length < 1) {
										// _this.addRandomData(records);
										_this.addList(records)
									}
								} else {
									_this.records = records;
								}
								_this.loadingone = false
							}

						} else if (res.data.code == 3006) {
							let title = ''
							if (topicType == 4) { //分享
								title = '分享已被删除'
							} else if (topicType == 2) { //讲堂
								title = '讲堂已过期'
							} else if (topicType == 1) { //文章
								title = '文章已过期'
							}
							uni.showToast({
								title: title,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(err => {})
			},
			change(index) {
				this.current = index;
				this.pageCurrent = 1
				if (index == 2) { //分享  3为商城 不能收藏跳过
					this.getUserCollectList(1, this.pageSize, index + 2, 1, false)
				} else {
					this.getUserCollectList(1, this.pageSize, index + 1, 1, false)
				}
			},
			addRandomData(list) {
				if (this.leftList.length >= 1) {
					this.leftList = this.leftList.concat(list)
				} else {
					this.leftList = list
				}
				// let leftList = [],
				// 	rightList = [];
				// for (let i = 0; i < list.length; i++) {
				// 	let item = list[i];
				// 	console.log(item, 230)
				// 	if (i % 2 == 0) {
				// 		leftList.push(item)
				// 	} else {
				// 		rightList.push(item)
				// 	}
				// }
				// this.leftList = this.leftList.length == 0 ? leftList : this.leftList.concat(leftList);
				// this.rightList = this.rightList.length == 0 ? rightList : this.rightList.concat(rightList);
			}
		}
	}
</script>

<style lang="scss">
	@import "../../find/basescss/basescss.scss";

	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}

	.body-bgf {
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 24upx auto 0;
	}

	.typearea {
		width: 654upx;
		margin: 0 auto;
	}

	.lines {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
		margin-top: 30upx;
	}

	.every-list {
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;

		.left-img {
			width: 332upx;
			height: 187upx;
			position: relative;

			.video-img-box {
				position: absolute;
				right: 10upx;
				margin-top: -50upx;
			}
		}

		.right-text {
			width: 300upx;
			height: 84upx;
			font-size: 30upx;
			line-height: 42upx;
			// background-color: #0081FF;
			margin-right: 4upx;
			color: #333333;
		}

		.eye-look {
			margin-top: 10upx;
			display: flex;
			align-items: center;
			margin-top: 62upx;

			.eyeImg-box {
				width: 43upx;
				height: 27upx;
			}

			.look-num {
				font-size: 26upx;
				color: #999999;
				margin-left: 12upx;
			}
		}

	}
</style>
